<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="fragment/headFragment:: head"></div>
<body class="cbp-spmenu-push">
<div class="main-content">
	<!--left-fixed -navigation-->
	<div th:replace="fragment/left_sidebar:: left_sidebar"></div>
	<!--left-fixed -navigation-->
	<!-- header-starts -->
	<div th:replace="fragment/header_section :: header_section"></div>
	<!-- //header-ends -->
	<!-- main content start-->
<!--	<div id="page-wrapper"></div>-->

	<div id="page-wrapper">

		<div class="main-page">
			<div class="col-md-6 charts chrt-page-grids">
				<h4 class="title">评价统计</h4>
				<canvas id="bar" height="290" width="400" style="width: 400px; height: 290px;"></canvas>
			</div>
			<div class="col-md-6 charts chrt-page-grids chrt-right">
				<h4 class="title">问题解决</h4>
				<div class="pie-grid">
					<canvas id="pie" height="300" width="400" style="width: 400px; height: 300px;"></canvas>
				</div>
			</div>
			<div class="panel-body widget-shadow">
				<table class="table">
					<thead>
					<tr>
						<th>id</th>
						<th>客服昵称</th>
						<th>有效会话数量</th>
						<th>已解决</th>
						<th>未解决</th>
						<th>好评</th>
						<th>中评</th>
						<th>差评</th>
						<th>未评</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="wqs, rowInfo : ${lists}">
						<td th:text="${wqs.getId()}"></td>
						<td th:text="${wqs.getNickname()}"></td>
						<td th:text="${wqs.getEffectivesessioncount()}"></td>
						<td th:text="${wqs.getResolved()}"></td>
						<td th:text="${wqs.getUnsolved()}"></td>
						<td th:text="${wqs.getGoodreview()}"></td>
						<td th:text="${wqs.getMediumreview()}"></td>
						<td th:text="${wqs.getBadreview()}"></td>
						<td th:text="${wqs.getNoreview()}"></td>
					</tr>
					</tbody>
				</table>
                <ul class="pagination pagination-sm">
                    <li class="active"><a th:href="@{/workQualityStatistics/index(current=1,size=10)}">«</a></li>
<!--                    <li class="active"><a href="#">1</a></li>-->
                    <li><a th:href="@{/workQualityStatistics/index(current=${i}, size = 10)}" th:each="i : ${#numbers.sequence(1,pagecount)}"><span th:text="${i}"></span></a></li>
                    <li class="active"><a th:href="@{/workQualityStatistics/index(current=${pagecount},size=10)}">»</a></li>
                </ul>
<!--				<a >首页</a>-->
<!--                <a th:href="@{/workQualityStatistics/index(current=${i}, size = 10)}" th:each="i : ${#numbers.sequence(1,pagecount)}"><span th:text="${i}"></span>1</a>-->
<!--				<a th:href="@{/workQualityStatistics/index(current=${pagecount},size=10)}">尾页</a>-->
			</div>
		</div>
	</div>
	<!--footer-->
	<div class="footer">
		<p>Copyright &copy; 2021.Igeek All rights reserved.</p>
	</div>
	<!--//footer-->
</div>
<!-- Classie -->
<script src="js/classie.js"></script>
<script>
	var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
			showLeftPush = document.getElementById( 'showLeftPush' ),
			body = document.body;

	showLeftPush.onclick = function() {
		classie.toggle( this, 'active' );
		classie.toggle( body, 'cbp-spmenu-push-toright' );
		classie.toggle( menuLeft, 'cbp-spmenu-open' );
		disableOther( 'showLeftPush' );
	};


	function disableOther( button ) {
		if( button !== 'showLeftPush' ) {
			classie.toggle( showLeftPush, 'disabled' );
		}
	}
</script>
<script th:inline="javascript">

	var a = [[${a}]];
	console.log(a)
	var barChartData = {
		labels : ["好评","中评","差评","未评"],
		datasets : [
			{
				fillColor : "rgba(79, 82, 186, 0.83)",
				strokeColor : "#4F52BA",
				highlightFill: "#4F52BA",
				data : [a[0], a[1], a[2], a[3]]
			}
		]

	};

    var pieData = [
        {
            value : a[4],
            color : "#585858"
        },
        {
            value : a[5],
            color : "#e94e02"
        }

    ];
    new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);
	new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
</script>
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>